# 打印属性相关 # 导入组件相关

<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="类型名称">
              <el-input v-model="query.typename" placeholder="请输入" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型编码">
              <el-input v-model="query.typecode" placeholder="请输入" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addOrUpdateHandle()"
              >新增
            </el-button>
          </div>
          <div class="JNPF-common-head-right">
            <el-tooltip content="高级查询" placement="top" v-if="true">
              <el-link
                icon="icon-ym icon-ym-filter JNPF-common-head-icon"
                :underline="false"
                @click="openSuperQuery()"
              />
            </el-tooltip>
            //树形同步加载内容
            <el-tooltip effect="dark" content="展开" placement="top">
              <el-link
                v-show="!expandsTree"
                type="text"
                icon="icon-ym icon-ym-btn-expand JNPF-common-head-icon"
                :underline="false"
                @click="toggleExpandList()"
              />
            </el-tooltip>
            <el-tooltip effect="dark" content="折叠" placement="top">
              <el-link
                v-show="expandsTree"
                type="text"
                icon="icon-ym icon-ym-btn-collapse JNPF-common-head-icon"
                :underline="false"
                @click="toggleExpandList()"
              />
            </el-tooltip>
            <el-tooltip
              effect="dark"
              :content="$t('common.refresh')"
              placement="top"
            >
              <el-link
                icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                :underline="false"
                @click="initData()"
              />
            </el-tooltip>
          </div>
        </div>
        <JNPF-table
          v-loading="listLoading"
          :data="list"
          @sort-change="sortChange"
          :span-method="arraySpanMethod"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: '' }"
          :default-expand-all="expandsTable"
          v-if="refreshTable"
        >
          <el-table-column prop="typename_name" label="类型名称" align="left">
          </el-table-column>
          <el-table-column prop="typecode_name" label="类型编码" align="left">
          </el-table-column>
          <el-table-column prop="isshow_name" label="是否导航展示" align="left">
          </el-table-column>
          <el-table-column prop="sort_name" label="排序" align="left">
            <template slot-scope="scope" v-if="scope.row.sort_name">
              <JnpfNumber v-model="scope.row.sort_name" :thousands="false" />
            </template>
          </el-table-column>
          <el-table-column
            prop="enabledmark_name"
            label="是否启用"
            align="left"
          >
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.enabledmark == '1'"
                type="text"
                class="JNPF-table-delBtn"
                @click="changeStatus(scope.row)"
                >禁用
              </el-button>
              <el-button v-else type="text" @click="changeStatus(scope.row)"
                >启用
              </el-button>
              <el-button type="text" @click="addOrUpdateHandle(scope.row.id)"
                >编辑
              </el-button>
              <el-button
                type="text"
                class="JNPF-table-delBtn"
                @click="handleDel(scope.row.id)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </JNPF-table>
      </div>
    </div>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />

    <ImportBox v-if="uploadBoxVisible" ref="UploadBox" @refresh="initData" />
    <Detail
      v-if="detailVisible"
      ref="Detail"
      @refresh="detailVisible = false"
    />
    <ToFormDetail
      v-if="toFormDetailVisible"
      ref="toFormDetail"
      @close="toFormDetailVisible = false"
    />
    <SuperQuery
      v-if="superQueryVisible"
      ref="SuperQuery"
      :columnOptions="superQueryJson"
      @superQuery="superQuery"
    />
  </div>
</template>

<script>
import request from "@/utils/request";
import { mapGetters } from "vuex";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import JNPFForm from "./form";
import ExportBox from "./ExportBox";
import ToFormDetail from "@/views/basic/dynamicModel/list/detail";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import Detail from "./Detail";
import { getConfigData } from "@/api/onlineDev/visualDev";
import { getDefaultCurrentValueUserIdAsync } from "@/api/permission/user";
import { getDefaultCurrentValueDepartmentIdAsync } from "@/api/permission/organize";
import columnList from "./columnList";
import { thousandsFormat } from "@/components/Generator/utils/index";
import SuperQuery from "@/components/SuperQuery";
import superQueryJson from "./superQueryJson";

export default {
  components: { JNPFForm, ExportBox, Detail, ToFormDetail, SuperQuery },
  data() {
    return {
      keyword: "",
      expandsTree: true,
      refreshTree: true,
      toFormDetailVisible: false,
      expandObj: {},
      columnOptions: [],
      mergeList: [],
      exportList: [],
      columnList,
      expandsTable: true,
      refreshTable: true,
      expandsTree: true,

      superQueryVisible: false,
      superQueryJson,
      uploadBoxVisible: false,
      detailVisible: false,
      query: {
        typename: undefined,
        typecode: undefined
      },
      treeProps: {
        children: "children",
        label: "fullName",
        value: "id",
        isLeaf: "isLeaf"
      },
      list: [],
      listLoading: true,
      listQuery: {
        superQueryJson: "",
        sortCode: "desc",
        sidx: "sortCode"
      },
      formVisible: false,
      exportBoxVisible: false,
      parentidOptions: [],
      parentidProps: { label: "fullName", value: "id", children: "children" },
      interfaceRes: {}
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    menuId() {
      return this.$route.meta.modelId || "";
    }
  },
  created() {
    this.getColumnList(), this.initSearchDataAndListData();
  },
  methods: {
    toDetail(defaultValue, modelId) {
      if (!defaultValue) return;
      getConfigData(modelId).then(res => {
        if (!res.data || !res.data.formData) return;
        let formData = JSON.parse(res.data.formData);
        formData.popupType = "general";
        this.toFormDetailVisible = true;
        this.$nextTick(() => {
          this.$refs.toFormDetail.init(formData, modelId, defaultValue);
        });
      });
    },
    toggleTreeExpand(expands) {
      this.refreshTree = false;
      this.expandsTree = expands;
      this.$nextTick(() => {
        this.refreshTree = true;
        this.$nextTick(() => {
          this.$refs.treeBox.setCurrentKey(null);
        });
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.treeProps.label].indexOf(value) !== -1;
    },
    loadNode(node, resolve) {
      const nodeData = node.data;
      const config = {
        treeInterfaceId: "",
        treeTemplateJson: []
      };
      if (config.treeInterfaceId) {
        //这里是为了拿到参数中关联的字段的值，后端自行拿
        if (config.treeTemplateJson && config.treeTemplateJson.length) {
          for (let i = 0; i < config.treeTemplateJson.length; i++) {
            const element = config.treeTemplateJson[i];
            element.defaultValue = nodeData[element.relationField] || "";
          }
        }
        //参数
        let query = {
          paramList: config.treeTemplateJson || []
        };
        //接口
        getDataInterfaceRes(config.treeInterfaceId, query).then(res => {
          let data = res.data;
          if (Array.isArray(data)) {
            resolve(data);
          } else {
            resolve([]);
          }
        });
      }
    },
    getColumnList() {
      // 开启权限
      let columnPermissionList = [];
      const permissionList = this.$store.getters.permissionList;
      const modelId = this.$route.meta.modelId;
      const list = permissionList.filter(o => o.modelId === modelId);
      const columnList = list[0] && list[0].column ? list[0].column : [];
      for (let i = 0; i < this.columnList.length; i++) {
        inner: for (let j = 0; j < columnList.length; j++) {
          if (this.columnList[i].prop === columnList[j].enCode) {
            columnPermissionList.push(this.columnList[i]);
            break inner;
          }
        }
      }
      this.columnOptions = this.transformColumnList(columnPermissionList);
    },
    transformColumnList(columnList) {
      let list = [];
      for (let i = 0; i < columnList.length; i++) {
        const e = columnList[i];
        if (!e.prop.includes("-")) {
          list.push(e);
        } else {
          let prop = e.prop.split("-")[0];
          let label = e.label.split("-")[0];
          let vModel = e.prop.split("-")[1];
          let newItem = {
            align: "center",
            jnpfKey: "table",
            prop,
            label,
            children: []
          };
          e.vModel = vModel;
          if (!this.expandObj.hasOwnProperty(`${prop}Expand`))
            this.$set(this.expandObj, `${prop}Expand`, false);
          if (!list.some(o => o.prop === prop)) list.push(newItem);
          for (let i = 0; i < list.length; i++) {
            if (list[i].prop === prop) {
              list[i].children.push(e);
              break;
            }
          }
        }
      }
      this.getMergeList(list);
      this.getExportList(list);
      return list;
    },
    arraySpanMethod({ column }) {
      for (let i = 0; i < this.mergeList.length; i++) {
        if (column.property == this.mergeList[i].prop) {
          return [this.mergeList[i].rowspan, this.mergeList[i].colspan];
        }
      }
    },
    getMergeList(list) {
      let newList = JSON.parse(JSON.stringify(list));
      newList.forEach(item => {
        if (item.children && item.children.length) {
          let child = {
            prop: item.prop + "-child-first"
          };
          item.children.unshift(child);
        }
      });
      newList.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach((child, index) => {
            if (index == 0) {
              this.mergeList.push({
                prop: child.prop,
                rowspan: 1,
                colspan: item.children.length
              });
            } else {
              this.mergeList.push({
                prop: child.prop,
                rowspan: 0,
                colspan: 0
              });
            }
          });
        } else {
          this.mergeList.push({
            prop: item.prop,
            rowspan: 1,
            colspan: 1
          });
        }
      });
    },
    getExportList(list) {
      let exportList = [];
      for (let i = 0; i < list.length; i++) {
        if (list[i].jnpfKey === "table") {
          for (let j = 0; j < list[i].children.length; j++) {
            exportList.push(list[i].children[j]);
          }
        } else {
          exportList.push(list[i]);
        }
      }
      this.exportList = exportList;
    },
    goDetail(id) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.Detail.init(id);
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    async initSearchDataAndListData() {
      await this.initSearchData();
      this.initData();
    },
    //初始化查询的默认数据
    async initSearchData() {},
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        keyword: this.keyword,
        dataType: 1,
        menuId: this.menuId,
        moduleId: "503185375125045253"
      };
      request({
        url: `/api/example/MzCompilationtype/getList`,
        method: "post",
        data: _query
      }).then(res => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];

          _list.push(_data);
        }
        this.list = _list.map(o => ({
          ...o,
          ...this.expandObj
        }));
        this.listLoading = false;
      });
    },
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: `/api/example/MzCompilationtype/${id}`,
            method: "DELETE"
          }).then(res => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              }
            });
          });
        })
        .catch(() => {});
    },
    handelUpload() {
      this.uploadBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.UploadBox.init("", "example/MzCompilationtype");
      });
    },

    openSuperQuery() {
      this.superQueryVisible = true;
      this.$nextTick(() => {
        this.$refs.SuperQuery.init();
      });
    },
    superQuery(queryJson) {
      this.listQuery.superQueryJson = queryJson;
      this.listQuery.currentPage = 1;
      this.initData();
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JNPFForm.init(id, isDetail, this.list);
      });
    },
    exportData() {
      this.exportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.exportList);
      });
    },
    download(data) {
      let query = {
        ...data,
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId
      };
      request({
        url: `/api/example/MzCompilationtype/Actions/Export`,
        method: "post",
        data: query
      }).then(res => {
        if (!res.data.url) return;
        this.jnpf.downloadFile(res.data.url);
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },
    search() {
      this.listQuery.sortCode = "desc";
      this.listQuery.sidx = "sortCode";
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.search();
    },

    // 展开折叠方法
    toggleExpandList() {
      this.refreshTable = false;
      this.expandsTree = !this.expandsTree;
      this.expandsTable = !this.expandsTable;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    changeStatus(item) {
      let txt =
        "你确定" +
        (item.enabledmark == "1" ? "禁用" : "开启") +
        "吗, 是否继续?";
      this.$confirm(txt, "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/example/MzCompilationtype/enabledmark",
          method: "post",
          data: {
            id: item.id,
            enabledmark: item.enabledmark == "1" ? "0" : "1"
          }
        }).then(res => {
          this.$message({
            type: "success",
            message: res.msg,
            onClose: () => {
              this.initData();
            }
          });
        });
      });
    }
  }
};
</script>
